<template>
  <view class="page page-login">
    <!-- 		<u-navbar title="登录" bgColor="transparent" :autoBack="true">
		</u-navbar> -->
    <view class="header-nav">
      <u-navbar
        bgColor="transparent"
        title="登录"
        :safeAreaInsetTop="true"
        :titleStyle="{ color: '#000000', fontWeight: 500 }"
        :autoBack="true"></u-navbar>
      <image
        src="/static/login/2.png"
        mode="aspectFill"
        class="header-nav-bg"></image>
    </view>
    <view class="page-inner">
      <view class="logo-box">
        <image
          src="/static/login/1.png"
          mode="aspectFit"
          class="login-logo"></image>
      </view>
      <!-- 		<view class="text-box">
				<view class="text-1">
					小程序名称
				</view>
			</view> -->
      <view class="action-box">
        <view class="btn-box">
          <button
            v-if="!has_phone"
            class="btn-bind-phone flex-center"
            @click="openTerms()">
            <text>授权手机号登录</text>
          </button>
          <button
            v-else
            class="btn-bind-phone flex-center"
            @click="doFastLogin()">
            <text>快速登录</text>
          </button>
        </view>
      </view>
      <view class="footer-terms">
        <view class="terms-box" @click="openTerms()">
          <image
            class="image-check"
            v-if="!is_agree"
            src="/static/login/4.png"
            mode="aspectFit"></image>
          <image
            class="image-check"
            v-if="is_agree"
            src="/static/login/3.png"
            mode="aspectFit"></image>
          <text>我已阅读并同意</text>
        </view>
        <text @click="toTerms()" class="terms-text">小程序隐私政策</text>
      </view>
    </view>

    <login_terms_pop
      ref="login_terms_pop"
      @confirm="confirmTerms"
      @changePhoneStatus="changePhoneStatus" />
  </view>
</template>

<script>
import login_terms_pop from "@/components/login/login_terms_pop.vue";
export default {
  components: {
    login_terms_pop,
  },
  data() {
    return {
      is_agree: false,
      has_phone: false,
    };
  },
  watch: {},
  onLoad(option) {},
  onShow() {},
  methods: {
    openTerms() {
      this.$refs.login_terms_pop.init();
    },
    confirmTerms(option) {
      this.is_agree = true;
      if (option.type == "同意协议") {
        // if (option.data && option.data.username) {
        //   this.has_phone = true;
        // }
        this.toRoute("login-next");
      }
    },

    changePhoneStatus(status) {
      this.has_phone = status;
    },

    toTerms() {
      this.toRoute("/login-terms");
    },
    doFastLogin() {
      if (this.is_agree) {
        this.toBack();
      } else {
        this.openTerms();
      }
    },
  },
};
</script>
<style>
page {
  height: 100%;
}
</style>
<style lang="scss" scoped>
.page-login {
  width: 100%;
  height: 100%;
  background: #fff;
  .header-nav {
    width: 100%;
    height: 404upx;
    position: relative;
    &-bg {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }
  }
}
.page-inner {
  // position: relative;
  // z-index: 10;
  // padding: 64rpx 32rpx;
  // padding-top: 300rpx;
}

.logo-box {
  text-align: center;
  margin-top: 32upx;
  .login-logo {
    width: 362rpx;
    height: 306rpx;
  }
}

.text-box {
  margin-top: 66rpx;
  text-align: center;

  .text-1 {
    text-align: center;
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 40rpx;
    color: #98b847;
  }

  .text-2 {
    margin-top: 10rpx;
    text-align: center;
    font-size: 20rpx;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
  }
}

.action-box {
  margin-top: 264rpx;
  padding: 0 26rpx;
  display: flex;
  justify-content: center;

  .btn-box {
    width: 100%;
    position: relative;

    .btn-mask {
      position: absolute;
      z-index: 10;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
    }
  }

  .btn-bind-phone {
    text-align: center;
    width: 100%;
    height: 104rpx;
    background: #da4334;
    border-radius: 42rpx 42rpx 42rpx 42rpx;
    font-weight: bold;
    font-size: 34rpx;
    color: #ffffff;
  }
}

.footer-terms {
  margin-top: 50upx;
  text-align: center;
  width: 100%;
  text-align: center;
  display: flex;
  align-items: center;

  line-height: 34rpx;
  font-size: 24rpx;
  font-weight: 500;
  color: #3d3d3d;
  box-sizing: border-box;
  padding-left: 52upx;
  .terms-box {
    display: flex;
    align-items: center;
    justify-content: center;
    .image-check {
      margin-right: 10rpx;
      width: 36rpx;
      height: 36rpx;
    }
  }

  .terms-text {
    color: #e62129;
  }
}
</style>
